<template>
  <div style="width:100%;height:100%;">
    <div style="min-height:60px;width:100%;text-align: center;">
        <h2>表格组件示例</h2>
    </div>
    <el-collapse style="min-height:60px;" v-model="elCollapse2.value">
        <el-collapse-item title="目录" name="1">
            <template slot="title">某财务报表</template>
            <div style="width:100%;display:flex;align-items:flex-start;justify-content:flex-end;padding-bottom: 8px;">
                <el-button type="primary" size="small">
                    功能1
                </el-button>
                <el-button type="success" size="small">
                    功能2
                </el-button>
            </div>
            <el-table style="width:100%;" stripe border :data="elTable7.data">
                <el-table-column prop="select" label="选择" width="50" type="selection">
                </el-table-column>
                <el-table-column prop="date" label="日期" width="120">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="100" sortable="true">
                </el-table-column>
                <el-table-column prop="address" label="地址">
                </el-table-column>
                <el-table-column prop="process" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button>操作</el-button>
                      </template>
                </el-table-column>
            </el-table>
            <div style="width:100%;display:flex;align-items:flex-start;justify-content:space-between;margin-top: 12px;">
                <div style="width:100%;">
                    <el-button type="primary" size="small">
                        功能3
                    </el-button>
                    <el-button type="success" size="small">
                        功能4
                    </el-button>
                </div>
                <el-pagination layout="prev, pager, next" :total="50">
                </el-pagination>
            </div>
        </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
const childrenProps = {};

export default {
    component : {
    },
    data(){
        return {
            //data定义,
            elTable7 : childrenProps.elTable7(),
    elCollapse2 : {"value":["1",]},
        };
    },
}

childrenProps.elTable7 = function(){
    return {
        "data":[{
                "date":"2016-05-02",
                "name":"王小虎",
                "address":"上海市普陀区金沙江路 1518 弄",
            },{
                "date":"2017-05-04",
                "name":"王大虎",
                "address":"上海市普陀区金沙江路 1517 弄",
            },{
                "date":"2015-05-01",
                "name":"王中虎",
                "address":"上海市普陀区金沙江路 1519 弄",
            },{
                "date":"2018-05-03",
                "name":"王老虎",
                "address":"上海市普陀区金沙江路 1516 弄",
            },],
    }
};

</script>
<style type="css" scoped>
</style>